<template>
  <div class="home">
    <NavBar />
    <div class="content-wrapper">
      <el-carousel :interval="4000" arrow="always" class="home-carousel">
        <el-carousel-item v-for="(item, index) in carouselItems" :key="index">
          <img :src="item.imageUrl" alt="carousel" class="carousel-image" />
        </el-carousel-item>
      </el-carousel>
      <div class="recommended-works">
        <h2 class="section-title">所有著作</h2>

        <!-- 搜索与分类筛选区域 -->
      <div class="flex justify-center mb-6 space-x-4">
        <el-input v-model="searchKeyword" placeholder="输入著作名称搜索" @keyup.enter="searchWorks" class="w-1/3"></el-input>
        <el-select v-model="selectedCategory" @change="searchWorks" placeholder="选择分类">
          <el-option label="所有分类" value=""></el-option>
          <el-option v-for="category in categories" :key="category.id" :label="category.name" :value="category.id"></el-option>
        </el-select>
        <el-button @click="searchWorks" type="primary">搜索</el-button>
      </div>

        <el-row :gutter="20">
          <el-col :span="6" v-for="(work, index) in works" :key="index">
            <el-card class="work-card" >
              <img :src="work.workPicture" alt="work cover" class="work-cover" @click="goToWorkDetail(work.id)"/>
              <div class="card-content" @click="goToWorkDetail(work.id)">
                <h3 class="work-title">{{ work.name }}</h3>
                <p class="work-author">{{ work.authorName }}</p>
                <p class="work-synopsis" >{{ work.synopsis }}</p>
              </div>
            </el-card>
          </el-col>
        </el-row>


      </div>
    </div>
    <Footer />
  </div>
</template>

<script>
import NavBar from '@/components/NavBar.vue'
import Footer from '@/components/Footer.vue'

export default {
  components: {
    NavBar,
    Footer
  },
  data() {
    return {
      carouselItems: [
        { imageUrl: require('@/assets/images/1.jpg') },
        { imageUrl: require('@/assets/images/2.jpg') },
        { imageUrl: require('@/assets/images/3.jpg') }
      ],
      works: [],
      searchKeyword: '',
      selectedCategory: '',
      categories: []


    }
  },

  mounted() {
    this.fetchCategories();
    this.searchWorks();
  },

  methods: {
    goToWorkDetail(id) {
      // console.log('点击了作品卡片，作品ID：', id);
      this.$router.push({ name: 'WorksDetail', params: { id } })
    },


    fetchCategories() {
      this.$http.get('/category')
        .then(response => {
          this.categories = response.data;
          // console.log('获取分类数据成功:', this.categories);
        })
        .catch(error => {
          console.error('获取分类数据失败:', error);
        });
    },
    searchWorks() {
      const params = {
        name: this.searchKeyword,
        categoryId: this.selectedCategory
      };
      this.$http.get('/work', { params })
        .then(response => {
          this.works = response.data;
          // console.log('获取作品数据成功:', this.works);
        })
        .catch(error => {
          console.error('获取作品数据失败:', error);
        });
    },

  }
}
</script>

<style scoped>
.home-carousel {
  height: 400px;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.home-carousel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6));
  z-index: 1;
}

.carousel-image {
  width: auto;
  height: auto;
  transition: transform 0.5s ease, opacity 0.5s ease;
  transform: scale(1);
  opacity: 1;
}

.el-carousel__item.is-active .carousel-image {
  transform: scale(1.1);
  opacity: 1;
}

.recommended-works {
  padding: 20px;
}

.section-title {
  font-size: 24px;
  margin-bottom: 20px;
}

.work-card {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.work-card:hover {
  transform: translateY(-5px);
}

.work-cover {
  width: auto;
  height: auto;
  object-fit: cover;
}

.card-content {
  padding: 10px;
}

.work-title {
  font-size: 18px;
  margin-bottom: 5px;
}

.work-author {
  font-size: 14px;
  color: #666;
}

.work-synopsis {
  font-size: 14px;
  color: #666;
}
</style>    